<template>
  <div class="witness-body">
    <breadcrumb
      :bread-path-list="breadPathList"
      :last-bread-title="lastBreadTitle"
      :show-back-btn-flag="true"
      @handleBack="handleBack"
    />
    <div class="box_one">
      <div class="biaoTi">
        当前任务：
        <el-tooltip
          v-if="information.projectName"
          class="item"
          effect="light"
          max-width="85%"
          :content="information.projectName + ' ─ ' + information.bidSectionName"
          placement="top"
        >
          <!-- 下面的写法会出现undefined - undefined -->
          <!-- <span> {{ information.projectName + " ─ " + information.bidSectionName }}</span> -->
          <!-- 推荐写法 -->
          <span>{{ information.projectName }} - {{ information.bidSectionName }}</span>
        </el-tooltip>
      </div>
    </div>
    <div class="box" v-loading="loading">
      <div class="box_tow">
        <div class="box_top">
          <!-- {{ informSubTaskList }}
          {{ activeName }} -->
          <!--  item.witnessLinkCode === 'ZB'
                  ? '招标'
                  : item.witnessLinkCode === 'TB'
                  ? '投标'
                  : item.witnessLinkCode === 'KB'
                  ? '开标'
                  : item.witnessLinkCode === 'PB'
                  ? '评标'
                  : item.witnessLinkCode === 'DB'
                  ? '定标'
                  : '' -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item, index) in informSubTaskList"
              :key="index"
              :label="item.witnessSubTaskName"
              :name="item.witnessSubTaskName"
            />
          </el-tabs>
        </div>
        <!-- -->
        <div class="pdf-flex">
          <div class="infinite-list" v-infinite-scroll="loadFn">
            <!-- pdf开始 -->
            <div id="exportPdf" ref="exportPdf">
              <div class="pdf_box">
                <h1>{{ information.recordTitle }}</h1>
                <div>
                  见证信息：{{ information.infoCount }}条（含预警信息
                  <span style="color: red">
                    {{ information.warnCount }}
                  </span>
                  条）
                </div>
                <div v-if="Status === 'WITNESS_UN_REVIEWED'" class="daishenhe-tag">
                  <i class="icon-daishenhe2" />
                </div>
                <div v-if="Status === 'WITNESS_FINISHED'" class="daishenhe-tag">
                  <i class="icon-yishenhe1" />
                </div>
                <!-- <el-table :data="information" border stripe>
                <el-table-column prop="col.id" key="col.id" label="col.label"> </el-table-column>
              </el-table> -->
                <div class=" ">
                  <table class="ui-table" style="width: 100%">
                    <colgroup>
                      <col name="el-table_column_1" width="110" />
                      <col name="el-table_column_2" min-width="126" />
                      <col name="el-table_column_3" width="110" />
                      <col name="el-table_column_4" min-width="126" />
                    </colgroup>
                    <tbody class="body">
                      <tr>
                        <th class="el-table_column_1 el-table__column">见证结果</th>
                        <td class="el-table_column_2">
                          <span v-if="information.resultStatus === 'NORMAL_TYPE'">正常</span>
                          <span v-else class="YC_iocn">
                            <img src="../../assets/imgs/warn.png" width="15" height="15" />
                            异常
                          </span>
                        </td>
                        <th class="el-table_column_3 el-table__column">见证人</th>
                        <td class="el-table_column_4">
                          {{ information.witnessUserName }}
                        </td>
                      </tr>
                      <tr>
                        <th class="el-table_column_1 el-table__column">交易时间</th>
                        <td class="el-table_column_2">
                          {{ information.witnessStartTime }}至{{ information.witnessEndTime }}
                        </td>
                        <th class="el-table_column_3 el-table__column">审核人</th>
                        <td class="el-table_column_4">
                          {{ information.witnessAuditUserName }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 待审核记录 -->
                <div v-if="Status === 'WITNESS_UN_REVIEWED'">
                  <div class="box_border">待审核记录</div>
                  <div class="SH_text">提示：被勾选的见证记录将归档至见证报告</div>
                  <div class="SH_box">
                    <div v-for="(item, indexs) in informationReviewList" :key="indexs" class="table_BT_SHs">
                      <div class="table_BT_left">{{ indexs + 1 }}、{{ item.itemName }}</div>
                      <div v-for="(jtem, jndex) in item.unReviewRecordList" :key="jndex" class="table_BT_SH">
                        <el-checkbox-group
                          v-model="radio"
                          class="radio_SH"
                          @change="radioChange(jtem, item.unReviewRecordList)"
                        >
                          <el-checkbox :label="jtem.itemCode" :disabled="urlName === 'HaveWitnessed' ? true : false">
                            <div class="table_BT_left">
                              {{ jtem.isSystem === "YES" ? "系统见证结果：" : "人工见证结果：" }}
                              <span v-if="jtem.itemStatus === 'NORMAL_TYPE'">正常</span>
                              <span v-if="jtem.itemStatus === 'EXCEPTION_TYPE'" class="YC_iocnss">
                                <img src="../../assets/imgs/warn.png" width="15" height="15" />
                                异常
                              </span>
                            </div>
                          </el-checkbox>
                        </el-checkbox-group>
                        <el-table :data="jtem.recordInfos" border style="width: 100%">
                          <el-table-column prop="witnessInfoContent" label="信息记录" width="180">
                            <template v-if="scope.row.witnessInfoContent" slot-scope="scope">
                              <div v-for="(ttem, k) in scope.row.witnessInfoContent.split('<br/>')" :key="k">
                                {{ ttem }}
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column prop="witnessStatus" label="状态" width="120">
                            <template slot-scope="scope">
                              <span v-if="scope.row.witnessStatus === 'NORMAL'">正常</span>
                              <span v-else class="YC_iocns">异常</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="createTime" label="记录时间" />
                          <el-table-column prop="systemName" label="来源" />
                        </el-table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box_border">预警信息</div>
                <div class="box_three ui-mt5">
                  共{{ information.warnCount }}条：系统判定{{ infoForm.systemCount }}条、人工判定{{
                    infoForm.peopleCount
                  }}条
                </div>
                <!-- 预警 -->
                <div v-for="(item, i) in informationList" :key="item.itemName + i">
                  <div class="table_BT">
                    <div class="table_BT_left">预警事项：{{ item.itemName }}</div>
                    <div class="table_BT_right">
                      <div class="table_BT_right1">
                        <!-- 预警等级：{{ item.warningLevel }} -->
                      </div>
                      <div class="table_BT_right2">预警来源：{{ item.warnSource }}</div>
                    </div>
                  </div>
                  <div>
                    <table
                      class="ui-table"
                      v-for="(jtem, jndex) in item.recordInfos"
                      :key="jndex + i"
                      style="width: 100%; margin-bottom: 10px"
                    >
                      <colgroup>
                        <col name="el-table_column_1" width="110" />
                        <col name="el-table_column_2" min-width="126" />
                        <col name="el-table_column_3" width="110" />
                        <col name="el-table_column_4" min-width="126" />
                      </colgroup>
                      <tbody class="body">
                        <tr>
                          <th>预警时间</th>
                          <td colspan="3">
                            {{ jtem.createTime }}
                          </td>
                        </tr>
                        <tr>
                          <th>预警信息</th>
                          <td v-if="jtem.witnessInfoContent" colspan="3">
                            <div v-for="(ttem, k) in jtem.witnessInfoContent.split('<br/>')" :key="k">
                              {{ ttem }}
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="box_border">见证记录</div>
                <div v-for="(item, indexs) in informationWitnessList" :key="indexs + 'a'" class="table_BT_witness">
                  <div class="table_BT">
                    <div class="table_BT_left">{{ indexs + 1 }}、{{ item.itemName }}</div>
                    <div class="table_BT_right">
                      <div class="table_BT_right1">
                        状态：
                        <span v-if="item.itemStatus === 'NORMAL_TYPE'">正常</span>
                        <span v-else class="YC_iocn">
                          <img src="../../assets/imgs/warn.png" width="15" height="15" />
                          异常
                        </span>
                      </div>
                      <div class="table_BT_right2">确认人：{{ item.confirmUserName }}</div>
                    </div>
                  </div>
                  <template>
                    <table></table>
                  </template>
                  <el-table :data="item.recordInfos" border :key="indexs + 'table'" style="width: 100%">
                    <el-table-column width="50" label="序号">
                      <template slot-scope="scope">
                        <div>{{ indexs + 1 }}.{{ scope.$index + 1 }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="witnessInfoContent" label="信息记录" width="180">
                      <template v-if="scope.row.witnessInfoContent" slot-scope="scope">
                        <div v-for="(ttem, k) in scope.row.witnessInfoContent.split('<br/>')" :key="k">
                          {{ ttem }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="witnessStatus" label="状态" min-width="100" max-width="180">
                      <template slot-scope="scope">
                        <span v-if="scope.row.witnessStatus === 'NORMAL'">正常</span>
                        <span v-else class="YC_iocn">
                          <img src="../../assets/imgs/warn.png" width="15" height="15" />
                          异常
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="记录时间" min-width="110" max-width="180" />
                    <el-table-column prop="systemName" label="来源" min-width="100" max-width="180" />
                  </el-table>
                </div>
              </div>
            </div>
            <!-- pdf结束 -->
          </div>
        </div>
        <div class="footer_btn">
          <template v-if="Status === 'WITNESS_FINISHED'">
            <!-- 生成一个不可见的pdf,主要用于打印 -->
            <pdf ref="pdfPrint" style="display: none" :src="srcPdf" />
            <el-button
              type="primary"
              v-if="$hasBtnsPerm('BTN_WITNESS_RECORD_PRINT')"
              plain
              class="ui-pl10"
              :disabled="!srcPdf"
              @click="$refs.pdfPrint.print()"
            >
              打印
            </el-button>
            <el-button type="primary" v-if="$hasBtnsPerm('BTN_WITNESS_RECORD_DOWNLOAD')" @click="downloadAttachFn">
              下载
            </el-button>
          </template>
          <!-- {{ infoForm.reviewButtonShow }} -->
          <template v-if="Status === 'WITNESS_UN_REVIEWED' && urlName !== 'HaveWitnessed'">
            <el-button
              v-if="infoForm.reviewButtonShow"
              type="primary"
              :disabled="btnLoading"
              v-loading="btnLoading"
              @click="onSubmit"
            >
              审核通过
            </el-button>
            <el-button @click="PreviousStep">退出</el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { ToViiewRecord, Approved, subtaskDetailDownload } from "../../api/api.js";
  // import $PDFSave from "vue-to-pdf";
  // import print from "vue-print-nb";
  import pdf from "vue-pdf-cs";
  import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
  export default {
    name: "ViewingWitnessRecords",
    components: { pdf },
    // directives: {
    //   pdf
    // },
    data() {
      return {
        printLoading: true,
        btnLoading: false,
        srcPdf: "",
        url: "../../assets/imgs/warn.png",
        count: 10,
        loading: false,
        activeName: "",
        lastBreadTitle: "",
        radio: [],
        radioArr: [],
        recordIdArr: [],
        breadPathList: [],
        Status: "",
        active: null,
        infoForm: {},
        information: {},
        informations: {
          projectId: "",
          bidSectionId: "",
          witnessLinkCode: "",
          witnessSubTaskId: "",
          witnessSubTaskStatusEnum: "",
          urlName: ""
        },
        informationList: [],
        informSubTaskList: [],
        informationWitnessList: [],
        informationReviewList: [],
        witnessSubTaskId: "",
        recordId: "",
        urlName: "",
        deleteRecordIds: []
      };
    },
    async created() {
      this.lastBreadTitle = "";
      this.informations.projectId = this.$route.query.projectId;
      this.informations.bidSectionId = this.$route.query.bidSectionId;
      this.informations.witnessLinkCode = this.$route.query.witnessLinkCode;
      this.informations.witnessSubTaskName = this.$route.query.witnessSubTaskName;
      this.informations.witnessSubTaskId = this.$route.query.witnessSubTaskId;
      this.informations.witnessSubTaskStatusEnum = this.$route.query.witnessSubTaskStatusEnum;
      this.informations.urlName = this.$route.query.urlName;
      await this.ToViiewRecordFn(this.informations);
      // this.Status = this.informations.witnessSubTaskStatusEnum;
      this.urlName = this.informations.urlName;
      this.informSubTaskList.map((item) => {
        // if (this.informations.witnessLinkCode === item.witnessLinkCode) {
        //   this.activeName = item.witnessLinkCode;
        // }
        console.log("item", item);
        if (this.informations.witnessSubTaskName === item.witnessSubTaskName) {
          this.activeName = item.witnessSubTaskName;
        }
      });
      let routerName = {};
      if (this.urlName === "WitnessTaskView") {
        this.lastBreadTitle = "查看已完成任务";
        routerName = {
          path: "/WitnessTaskManagement/WitnessTaskView",
          title: "见证任务管理"
        };
      }
      if (this.urlName === "WitnessRecordApprove") {
        this.lastBreadTitle = "审核见证记录";
        routerName = {
          path: "/WitnessTaskManagement/WitnessRecordApprove",
          title: "见证任务管理"
        };
      }
      if (this.urlName === "HaveWitnessed") {
        this.lastBreadTitle = "查看见证任务";
        routerName = {
          path: "/WitnessTask/HaveWitnessed",
          title: "我的见证"
        };
      }
      this.breadPathList.push(routerName);
      await this.subtaskDetailDownloadFn();
    },
    methods: {
      downloadAttachFn(scope) {
        // const downloadUrl = `${process.env.VUE_APP_API}/platform/attach/download?attachId=${this.p}`;
        // let name = scope.row.attachmentName;
        const downloadRes = async () => {
          const response = await fetch(this.downLoadSrc); // 内容转变成blob地址
          const blob = await response.blob(); // 创建隐藏的可下载链接
          const objectUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = objectUrl;
          a.download = this.originalName;
          // a.download = `${this.information.recordTitle}.pdf`;
          a.click();
          a.remove();
        };
        downloadRes();
      },
      // 导出(pdf)
      savePdf() {
        // this.$PDFSave(this.$refs.exportPdf, "我的文件");
        this.$PDFSave(
          this.$refs.exportPdf,
          `${this.information.projectName}─${this.information.bidSectionName}-${this.information.recordTitle}`
        );
      },
      // 返回方法
      handleBack() {
        if (this.urlName === "WitnessTaskView") {
          this.$router.push({ path: "/WitnessTaskManagement/WitnessTaskView" });
        } else if (this.urlName === "WitnessRecordApprove") {
          this.$router.push({
            path: "/WitnessTaskManagement/WitnessRecordApprove"
          });
        } else if (this.urlName === "HaveWitnessed") {
          this.$router.push({
            path: "/WitnessTask/HaveWitnessed"
          });
        } else {
          this.$router.push({
            path: "/WitnessTaskManagement/WitnessRecordApprove"
          });
        }
      },
      loadFn() {
        this.count += 2;
      },
      PreviousStep() {
        if (this.urlName === "WitnessRecordApprove") {
          this.$router.push({
            name: "WitnessRecordApprove",
            query: { urlName: "WITNESS_RECORD_APPROVE" }
          });
          // this.$router.go(-1);
          // this.$router.back();
        }
        if (this.urlName === "WitnessTaskView") {
          this.$router.push({
            name: "WitnessTaskView",
            query: { urlName: "WITNESS_TASK_VIEW" }
          });
        }
      },
      radioChange(e, recordList) {
        if (this.radio.length > this.radioArr.length) {
          let otherRadio = "";
          for (let i = 0; i < recordList.length; i++) {
            if (e.itemCode !== recordList[i].itemCode) {
              otherRadio = recordList[i].itemCode;
            }
          }
          if (this.radio.indexOf(otherRadio) > -1) {
            this.radio.splice(this.radio.indexOf(otherRadio), 1);
          }
        }
        if (this.radioArr) {
          this.radioArr.map((r) => {
            if (e.itemCode === r) {
              this.radio = this.radioArr;
            }
          });
        }
        this.radioArr = this.radio;
        this.witnessSubTaskId = e.witnessSubTaskId;
        this.recordId = e.recordId;
      },
      handleClick(tab) {
        console.log("tab", tab._props);
        console.log("activeName", this.activeNames);
        const { projectId } = this.informations;
        this.informSubTaskList.map((i) => {
          // console.log("i", i);
          // 复评（一次），不能用witnessLinkCode
          // if (tab._props.name === i.witnessLinkCode) {
          if (tab._props.name === i.witnessSubTaskName) {
            const row = { ...i, projectId };
            this.informations.witnessSubTaskId = row.witnessSubTaskId;
            this.ToViiewRecordFn(row);
            this.subtaskDetailDownloadFn();
          }
        });
      },
      onSubmit() {
        this.btnLoading = true;
        const arr = [];
        this.deleteRecordIds = [];
        this.informationReviewList.map((item) => {
          item.unReviewRecordList.map((jtem) => {
            arr.push({
              code: jtem.itemCode,
              recordId: jtem.recordId
            });
          });
        });
        this.ApprovedFn(arr);
      },
      // 审核通过
      async ApprovedFn(Arr) {
        const someArr = Arr.filter((item) => !this.radioArr.some((ele) => ele === item.code));
        someArr.map((ttem) => {
          this.deleteRecordIds.push(ttem.recordId);
        });
        try {
          const p = {
            witnessSubTaskId: this.witnessSubTaskId,
            deleteRecordIds: this.deleteRecordIds
          };
          const res = await Approved(p);
          if (res.success) {
            this.$message({
              type: "success",
              message: res.message || "审核通过",
              single: true
            });
            this.PreviousStep();
          } else {
            // WITNESS_TASK_NOT_REVIEWED_AND_FINISHED(202222, "见证任务状态不是已完成状态"),
            // WITNESS_TASK_NOT_REVIEWED(20206, "见证任务状态不是待审核状态，无法审核！"),
            if (res.code === 20206) {
              // location.reload();
              await this.ToViiewRecordFn(this.informations);
              this.subtaskDetailDownloadFn();
            }
            if (res.code === 202222) {
              this.handleBack();
              // this.$router.go(-1);
            }
            this.$message({
              type: "error",
              message: res.message,
              single: true
            });
          }
        } catch (err) {
          console.error(err);
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
        this.btnLoading = false;
      },
      // 查看见证记录
      async ToViiewRecordFn(row) {
        try {
          this.loading = true;
          this.radio = [];
          this.radioArr = [];
          this.recordIdArr = [];
          const p = {
            projectId: row.projectId,
            witnessSubTaskId: row.witnessSubTaskId,
            bidSectionId: this.informations.bidSectionId
          };
          const res = await ToViiewRecord(p);
          console.log("ToViiewRecordFn res", res);
          if (res.success) {
            this.infoForm = res.data;
            this.information = res.data.witnessRecordBaseInfoVO;
            this.informationList = res.data.witnessWarnInfoVO;
            this.Status = res.data.witnessSubTaskStatus;
            this.informationWitnessList = res.data.witnessSubTaskRecordList;
            this.informationReviewList = res.data.unReviewRecordList;
            this.informSubTaskList = res.data.witnessSubTaskList;
            this.informationReviewList.map((item) => {
              item.unReviewRecordList.forEach((element) => {
                if (element.isSystem === "NO") {
                  this.radio.push(element.itemCode);
                  this.radioArr.push(element.itemCode);
                  this.recordIdArr.push(element.recordId);
                  this.witnessSubTaskId = element.witnessSubTaskId;
                }
              });
            });
            this.loading = false;
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (err) {
          console.error(err);
        }
      },
      // 下载pdf
      async subtaskDetailDownloadFn() {
        try {
          const p = {
            witnessSubTaskId: this.informations.witnessSubTaskId,
            projectId: this.informations.projectId,
            bidSectionId: this.informations.bidSectionId
          };
          const res = await subtaskDetailDownload(p);
          if (res.success) {
            // 生成下载链接
            this.downLoadSrc = `${process.env.VUE_APP_API}/platform/attach/download?attachId=${res.data.attachId}`;
            this.originalName = res.data.originalName; // pdf名称
            // 生成预览和打印链接
            this.srcPdf = pdf.createLoadingTask({
              url: this.downLoadSrc,
              CMapReaderFactory
            });
          } else {
            // WITNESS_TASK_NOT_REVIEWED_AND_FINISHED(202222, "见证任务状态不是已完成状态"),
            // WITNESS_TASK_NOT_REVIEWED(20206, "见证任务状态不是待审核状态，无法审核！"),
            if (res.code === 20206) {
              // location.reload();
              await this.ToViiewRecordFn(this.informations);
              this.subtaskDetailDownloadFn();
            }
            if (res.code === 202222) {
              this.handleBack();
              // this.$router.go(-1);
            }
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (err) {
          console.error(err);
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .layout-search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0px 10px 10px 0;
    background-color: #eeeeee !important;
    // display: none;
  }
  .btn_top {
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    padding: 0px 20px;
    background-color: #eee;
    border: 1px solid rgb(0, 140, 255);
  }
  .box_one {
    line-height: 0;
    padding: 10px 20px;
    border-top: 1px solid #ededed;
    background-color: #fff;
  }
  .box_top {
    padding: 0 10px;
  }
  .box_border {
    font-weight: bold;
    padding-left: 5px;
    margin-top: 10px;
    border-left: 2px solid rgb(0, 140, 255);
  }
  .box_three {
    padding-left: 5px;
  }
  i {
    position: relative;
    top: 3px;
    right: 7px;
    font-size: 22px;
    color: rgb(0, 140, 255);
    // border: 1px solid #fff;
  }
  .pdf-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 0;
  }
  .infinite-list {
    // padding: 15px;
    height: 100%;
    width: 830px;
    flex: 1;
    margin: 0 auto;
    // padding-right: 25%;
    // padding-left: 25%;
    // height: 620px;
    overflow: auto;
  }
  .footer_btn {
    text-align: right;
    padding: 10px;
    // margin-right: 10px;
  }
  ::v-deep .el-steps--simple .el-step .el-step__title {
    line-height: 20px !important;
    color: #1890ff !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process .el-step__title {
    color: #fff !important;
  }
  ::v-deep .el-steps--simple .el-step {
    background: #e8f4ff !important;
    cursor: pointer !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process {
    background: #1890ff !important;
  }
  ::v-deep .el-steps--simple .el-step.is-step-process:after {
    line-height: 20px !important;
    border: 10px solid transparent;
    border-left: 12px solid #1890ff !important;
    right: -22px !important;
  }
  ::v-deep .el-steps--simple .el-step {
    height: 20px !important;
  }
  ::v-deep .el-checkbox__inner {
    border-radius: 10px !important;
  }
  ::v-deep .el-steps--simple .el-step:after {
    right: -22px !important;
    border: 10px solid transparent;
    border-left: 12px solid #e8f4ff !important;
  }
  ::v-deep .el-steps--simple .el-step:before {
    border: 10px solid transparent !important;
    border-left: 10px solid #fff !important;
  }
  ::v-deep .el-steps--simple:not(.is-average) {
    top: 4px !important;
  }
  ::v-deep .el-checkbox {
    // 选框
    .el-checkbox__inner {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      // 中间的 “✔” 的位置调整
      &::after {
        width: 3px;
        height: 3px;
        left: 4px;
        border-radius: 10px;
        background: #1890ff;
        border-left: none;
        border-top: none;
        top: 4px;
      }
    }
  }
  ::v-deep .is-last {
    clear: both !important;
  }
  .box {
    padding: 10px;
    flex: 1;
    display: flex;
    // height: 100%;
  }
  .box_tow {
    // height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .pdf_box {
    border: 1px solid #ededed;
    padding: 10px;
    position: relative;
    .daishenhe-tag {
      display: inline-block;
      position: absolute;
      z-index: 9;
      top: 30px;
      // left: 720px;
      right: 18px;
      // margin-right: 10px;
      i {
        font-size: 70px;
        color: $primary;
      }
    }
    .daishenhe-tag .icon-yishenhe1 {
      color: #57b21c;
    }
    h1 {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
    }
    .table_BT {
      margin-top: 10px;
      width: 100%;
      height: 40px;
      background-color: #1890ff;
      -webkit-print-color-adjust: exact;
    }
    .ui-table {
      table {
        // table-layout: fixed;
        box-sizing: border-box;
        // border-top: 1px solid $line;
        // border-left: 1px solid $line;
      }
      th {
        background-color: #e5e5e5;
        -webkit-print-color-adjust: exact;
      }
      // th,
      // td {
      //   // border-bottom: 1px solid $line;
      //   // border-right: 1px solid $line;
      //   // padding: 10px;
      // }
    }
  }
  .table_BT_witness {
    margin-top: 10px;
    width: 100%;
  }
  .table_BT_left {
    padding-left: 10px;
    width: 48%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .table_BT_right {
    padding-left: 10px;
    width: 49%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .table_BT_right1 {
    width: 50%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .table_BT_right2 {
    width: 50%;
    color: #fff;
    display: inline-block;
    line-height: 40px;
  }
  .YC_iocn {
    color: red;
    font-weight: bold;
    img {
      margin-top: -3px;
    }
  }
  .YC_iocns {
    color: #333;
  }
  .YC_iocnss {
    color: #fff;
  }
  .SH_text {
    font-size: 12px;
    margin-left: 10px;
  }
  .table_BT_SH {
    width: 100%;
    background-color: #1890ff;
  }
  .table_BT_SHs {
    width: 100%;
    margin-top: 10px;
    background-color: #6486c6;
  }
  .SH_box {
    width: 96%;
    padding: 0 20px;
  }
  .biaoTi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
  }
  .biaoTi span {
    font-size: 14px;
    font-weight: bold;
  }
  .radio_SH {
    position: relative;
    bottom: 0px;
    right: 20px;
  }
</style>
<style media="print">
  /* @page {
    size: auto;
    margin: 3mm;
  }
  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  } */
  /* .pdf_box {
    background: rgb(193, 163, 163);
  } */
</style>
